<template>
  <div class="flex flex-column height order">
    <header-top
      ref="header"
      :TxtHeader="TxtHeader"
      style="border: 1px solid #eee"
      @leftClick="back"
    ></header-top>
    <div class="content">
      <div class="visitor_main">
        <div class="visitor_top">
          <img src="./img/icon_ts.png" />
          <span>为了医生更安全的治疗，请填写真实信息。</span>
        </div>
        <div class="pay_info">
          <div class="pay_title">基本信息</div>
        </div>
        <div class="visitor">
          <van-field
            v-model="information.name"
            label="就诊人"
            placeholder="请输入真实姓名"
          />
        </div>
        <div class="visitor">
          <van-field
            v-model="information.idCard"
            label="身份证号码"
            @blur="getIdcard"
            maxlength="18"
            placeholder="请填写"
          />
        </div>
        <div class="visitor">
          <van-field
            v-model="information.mobile"
            label="手机号码"
            @blur="confirmMobile"
            maxlength="11"
            placeholder="请输入11位手机号码"
          />
        </div>
        <div class="visitor">
          <van-field
            v-model="sms"
            label="短信验证码"
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button size="small" type="primary" @click="getsms"
                >{{text}}</van-button
              >
            </template>
          </van-field>
        </div>
      </div>
    </div>
    <div class="bottom">
      <button
        :class="this.information.mobile && sms && this.information.name && this.information.idCard ? 'active' : ''"
        @click="editPatient"
      >
        下一步
      </button>
    </div>
  </div>
</template>
<script>
import HeaderTop from "@/components/header-top";
import { Toast } from "vant";
import { getSms, editPatient } from "@/api/index";
export default {
  name: "editVisitor",
  components: {
    HeaderTop,
  },
  data() {
    return {
      information:this.$route.query.information,
      telephone: "",
      sex: {},
      sms: "",
      visitors: "",
      cardId: "",
      age: "",
      sexAndAge: {},
      i: true,
      timer: null,
      num: 10,
      text:"发送验证码",
      TxtHeader: {
        //头部设置
        color: "#333", //头部中间文字颜色
        title: "编辑就诊人",
        background: "#fff",
        leftOpt: {
          //左边按钮设置
          icon: "",
          text: "",
          color: "#333",
        },
      },
    };
  },
  methods: {
    editPatient() {
     
      let param = {
        id:this.information.id,
        name: this.information.name,
        idCard: this.information.idcard,
        mobile: this.information.mobile,
        smsVerifyCode: this.sms,
        relationship: 1,
         age: this.sexAndAge.age,
        sex: this.sex,
      };
      editPatient(param).then((res) => {
        this.$router.push("/chooseVisitor")
      });
    },
    getsms() {
        var that =this
      if (!this.i) return false;
      if(!that.information.mobile){
        return  Toast("请输入正确的手机号码");
      }
      let param = {
        phone: this.information.mobile,
        verifyCode: "",
        captchaId: "",
      };
      this.i = false;
      getSms(param).then((res) => {
        this.timer = setInterval(() => {
          this.num--;
          this.text = '重新'+this.num+'发送'
          if (this.num == 0) {
            this.i = true;
            clearInterval(this.timer);
            this.num = 10;
            this.text = "发送验证码"
          }
          console.log(this.num);
        }, 1000);
        this.data = res.body;
      });
    },
    back() {
      this.$router.go(-1);
    },
    //验证身份证号码
    getIdcard() {
      const idcard = this.information.idCard;
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      // eslint-disable-next-line no-empty
      if (idcard && reg.test(idcard)) {
      } else {
        Toast("请输入正确的身份证号码");
      }
    }, //验证手机号
    confirmMobile() {
      const mobile = this.information.mobile;
      const reg = /(^1[0-9]{10}$)/;
      // eslint-disable-next-line no-empty
      if (mobile && reg.test(mobile)) {
      } else {
        Toast("请输入正确的手机号");
      }
    },
  },
};
</script>
<style scoped>
.order >>> .van-field__label {
  color: #333;
}
.order >>> .van-field__control {
  text-align: right;
  color: #999;
}
.order >>> .van-cell {
  padding: 0.1rem 0;
}
</style>
<style lang="less" scoped>
.order {
  .content {
    height: calc(100% - 1.24rem);
    overflow-y: auto;
    background: #fff;
    .visitor_main {
      padding: 0.15rem;
      .visitor_top {
        margin-bottom: 0.18rem;
        img {
          width: 0.125rem;
          background-size: 100%;
        }
        span {
          font-size: 0.12rem;
          margin-left: 0.05rem;
          color: #999;
        }
      }
      .pay_info {
        border-radius: 0.07rem;
        background: #fff;
        margin-bottom: 0.3rem;
        .pay_time {
          line-height: 0.17rem;
          margin-bottom: 0.21rem;
          img {
            width: 0.125rem;
          }
        }
        .pay_title {
          padding-left: 0.15rem;
          position: relative;
          font-size: 0.18rem;
          height: 0.25rem;
          line-height: 0.25rem;
          margin-bottom: 0.2rem;
        }
        .pay_title::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0.05rem;
          width: 0.05rem;
          height: 0.15rem;
          background: #08d6c6;
        }
      }
      .visitor {
        border-bottom: 0.01rem solid #eae9e9;
        margin-bottom: 0.14rem;
      }
    }
  }
  .bottom {
    padding: 0.15rem 0.2rem;
    background: #fff;
    font-size: 0.18rem;
    box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.06);
    button {
      width: 100%;
      height: 0.44rem;
      border: 0;
      border-radius: 0.44rem;
      background: #f5f5f5;
      color: #ccc;
    }
    button.active {
      color: #fff;
      background-image: linear-gradient(to left, #02c0cb, #0adda4);
    }
  }
}
</style>
